<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title"></view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<swiper class="swiper-box" autoplay circular>
			<swiper-item v-for="(item, index) in detail.photos" :key="index">
				<image class="swiper-item" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="con">
			<view class="title">
				<view class="title_box">
					<view class="title_box_left">{{ detail.title }}</view>
					<view class="title_box_right" @click="$callPhone(detail.phone)">
						<image class="title_box_right_img" src="/static/67.png" mode=""></image>
						拨号
					</view>
				</view>
			</view>
			<view class="text">营业时间：{{ detail.kytime }}</view>
			<view class="info" @click="Location">
				<image class="info_img" src="/static/43.png" mode=""></image>
				<view class="info_left">
					<image class="info_left_img" src="/static/34.png" mode=""></image>
					{{ detail.address }}
				</view>
				<view class="info_right">
					地图导航
					<image class="info_right_img" src="/static/28.png" mode=""></image>
				</view>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				旅行社介绍
			</view>
			<view class="briefly">
				<rich-text :nodes="nodes_data(nodes)"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let id = ref(0)
	let detail = ref({})
	let list = ref([])
	let nodes = ref('')
	const nodes_data = (value) => {
		let finalHtml = processRichText(value)
		return finalHtml
	}
	// 处理富文本中的图片样式
	const processRichText = (html) => {
		// 1. 移除原img标签中的style和内联宽高
		let processedHtml = html
			.replace(/<img([^>]*)style="[^"]*"/g, '<img$1') // 移除原有style
			.replace(/<img([^>]*)width="[^"]*"/g, '<img$1') // 移除width属性
			.replace(/<img([^>]*)height="[^"]*"/g, '<img$1') // 移除height属性

		// 2. 为所有img标签添加自适应样式
		processedHtml = processedHtml.replace(
			/<img([^>]*)>/g,
			'<img$1 style="max-width:100%; height:auto; display:block; margin:0 auto;">'
		)

		return processedHtml
	}
	const Location = () => {
		console.log(666)
		uni.openLocation({
			name: detail.value.title,
			address: detail.value.address,
			latitude: Number(detail.value.weidu),
			longitude: Number(detail.value.jingdu),
			success: function () {
				console.log('success')
			},
			fail(err) {
				console.log('err', err)
			}
		})
	}

	const indexlist = async () => {
		await http.noAuthpost('/srapi/yuangong/lxdetail', { id: id.value }).then((res) => {
			console.log('返回值', res)
			detail.value = res.data
			nodes.value = res.data.content
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
</script>

<style lang="less" scoped>
	.top {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.swiper-box {
		width: 750rpx;
		height: 750rpx;
		.swiper-item {
			width: 750rpx;
			height: 750rpx;
		}
	}
	.con {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background: linear-gradient(0deg, #f4f5f9 40%, #ffffff 80%);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
		top: -30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000000;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		.title_zw {
			width: 6rpx;
			height: 30rpx;
			background: #2a68ef;
			border-radius: 3rpx;
			margin-right: 13rpx;
		}
		.title_right {
			flex: 1;
			font-size: 24rpx;
			font-weight: 500;
			text-align: right;
			color: #787878;
		}
		.title_box {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title_box_left {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
			.title_box_right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 700;
				color: #5a8dff;
				.title_box_right_img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 11rpx;
				}
			}
		}
	}
	.text {
		font-size: 20rpx;
		font-weight: 500;
		color: #787878;
		margin-bottom: 20rpx;
	}

	.info {
		padding: 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		height: 124rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		.info_img {
			width: 690rpx;
			height: 124rpx;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
		}
		.info_left {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 2;
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
			.info_left_img {
				width: 30rpx;
				height: 32rpx;
				margin-right: 18rpx;
			}
		}
		.info_right {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 2;
			font-size: 20rpx;
			font-weight: 500;
			color: #000000;
			.info_right_img {
				width: 9rpx;
				height: 16rpx;
				margin-left: 21rpx;
			}
		}
	}

	.notice {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		.notice_nr {
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			border-bottom: 1px solid #f4f5f9;
			.notice_nr_img {
				width: 29rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
			.notice_nr_box {
				.notice_nr_box_title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-bottom: 16rpx;
					line-height: 22rpx;
				}
				.notice_nr_box_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
			}
		}
	}

	.briefly {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		line-height: 36rpx;
	}

	//
</style>
